/*
 * @Author: silas 
 * @Date: 2021-08-03 17:38:29 
 * @Last Modified by: silas
 * @Last Modified time: 2021-08-10 17:15:56
 */
<template>
    <div class="core">
        <div class="header">
            <h3 class="title">收入完成进度</h3>
        </div>
        <div>
            <el-form :inline="true" :model="form">
                <el-form-item label="区域">
                    <dx-cascader :area_id.sync="form.areaId" ref="cascader" />
                </el-form-item>
                <el-form-item label="月份">
                    <el-date-picker
                        size="mini"
                        v-model="form.month"
                        value-format="yyyyMM"
                        type="month"
                        placeholder="选择年月"
                        :picker-options="pickerOptions"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button
                        size="mini"
                        id="search_btn"
                        type="primary"
                        @click="handleSearch()"
                        >查询</el-button
                    >
                    <el-button
                        size="mini"
                        id="export_btn"
                        @click="handleExport()"
                        >导出</el-button
                    >
                </el-form-item>
            </el-form>
        </div>
        <!--  :span-method="arraySpanMethod" -->
        <div class="table">
            <ux-grid
            size="mini"
            id="tablePx"
            ref="tablePx"
            :header-row-style="{ background: '#eef1f6' }"
            border
            :stripe="true"
            :widthResize="true"
            :height="height"
            style="width: 100%"
            v-loading="showTableLoading"
            show-overflow="tooltip"
            show-header-overflow="title"
        >
            
            <ux-table-column 
                :title="columns[0] && columns[0].label"
                align="center"
                width="150">
                <template slot-scope="scope">
                    <span class="area" @click="handle_area(scope.row)">{{!type ? scope.row.indexName : scope.row.areaName}}</span>
                </template>
            </ux-table-column>
            
            <ux-table-column
                :title="item.label"
                min-width="150"
                v-for="(item, i) in columns.slice(1)"
                :key="'item' + i"
                align="center"
                :field="item.value"
                
            >
            </ux-table-column>
        </ux-grid>
        </div>
         <!-- <div class="page">
            <el-pagination
                @size-change="handleSizeChange1"
                @current-change="handleCurrentChange1"
                :current-page="form.pageNum"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="form.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="form.total"
            ></el-pagination>
         </div> -->
    </div>
</template>

<script>
import { $budgetAPI } from "@/api";
import { mergeSpan } from "@/utils/mixin";
import FileSaver from "file-saver";
import XLSX from "xlsx";
import qs from "qs";
import prefixAPI from "@/api/prefixAPI"; 
import { getCookie, setCookie } from "@/common/js/cookie";
const url = prefixAPI.pack;
import {
    setSessionStorage,
    getSessionStorage,
    removeSessionStorage
} from "@/common/js/storage";
export default {
    data() {
        return {
            accountInfo: JSON.parse(getSessionStorage("accountInfo")),
            form: {
                areaId: "",
                month: this.moment().subtract(1, "months").format("YYYYMM"),
                // pageNum: 1,
                // pageSize: 10,
                // total: 0,
            },
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now() - 8.64e7;
                }
            },
            tableData: [],
            tableLoading: false,
            showTableLoading: false,
            columns: [],
            height: window.innerHeight - 60 - 30 - 175,
            indexCode: '',
            type: '',
            areaId: '',
        };
    },
    mounted() {
        var that = this;

        that.form.areaId = that.accountInfo.areaId;
        that.getData();
    },
    methods: {
        getData() {
            var that = this;

            that.tableLoading = true;
            $budgetAPI.getIncomeProductData(
                {
                    month: that.form.month,
                    areaId: that.type ? that.areaId : that.form.areaId,
                    indexCode: that.indexCode,
                    type: that.type
                    // pageNum: that.form.pageNum,
                    // pageSize: that.form.pageSize,
                },
                res => {
                    that.tableLoading = false;
                    if (res && res.code == 0) {

                        that.tableData = res.content.data;
                        that.columns =  Array.from(new Array(res.content.names.length), (it) => it = {label: '', value: ''});

                        if(!that.type) {
                            res.content.keys.map((it, i)=> {
                                that.columns[i]['value'] = it
                            })
                            res.content.names.map((it, i)=> {
                                that.columns[i]['label'] = it
                            })
                        } else {
                            res.content.names.map((it, i)=> {
                                that.columns[i].value = it.name;
                                that.columns[i].label = it.data;
                            })
                        }
                        
                        this.$refs.tablePx.reloadData(this.tableData);
                        that.form.total = res.content.total
                        console.log(res);
                    }
                }
            );
        },
        handleSearch() {
            var that = this;

            that.type = '';
            that.indexCode = '';
            that.getData();
        },
        handleExport() {
            var params = {
                ...this.form,
                type: this.type,
                indexCode: this.indexCode,
                token: getCookie("token"),
            };
            window.open(
                `${url}/incomeAnalysis/exportIncomeProductData?${qs.stringify(params)}`,
                "_self"
            );
        },
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex == 0 || columnIndex == 1 || columnIndex == 2) {
                return this.spanArr[rowIndex][columnIndex];
            }
        },
        handleSizeChange1(val) {
            this.form.pageSize = val;
            this.getData();
        },
        handleCurrentChange1(val) {
            this.form.pageNum = val;
            this.getData();
        },
        handle_area(it) {
            var that = this;
            console.log(it)
            
            if(it.areaLvl >= 5) {
                return
            }
            that.type = 1;
            that.indexCode = it.indexCode;
            that.areaId = it.areaId;
            that.getData();
        }
    }
};
</script>

<style lang="scss" scoped>
.core {
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eaeaea;
        height: 40px;
        margin: 0 -20px;
        padding: 0 20px;
        .title {
            font-weight: bold;
            font-size: 15px;
        }
    }
}
#search_btn {
    background-color: #2a90de;
}
#export_btn {
    background-color: #2cd531;
    color: #fff;
}
.area {
    color: #2a90de;
    cursor: pointer;
}
</style>
